<template>
  <main>
    <div class="require-container">
      <div class="require-title">
        <span style="font-weight: 600; margin-left: 20px; margin-right: 20px"> 用户管理列表 </span>
      </div>
      <div class="require-body">
        <el-table stripe :data="tableData" style="width: 100%" height="250">
          <el-table-column fixed prop="username" label="用户名"> </el-table-column>

          <el-table-column label="角色">
            <template slot-scope="props">
              <span>{{ getRoleNameByValue(props.row.role) }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="company" label="公司名称"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="50">
            <template slot-scope="scope">
              <el-popconfirm title="这是一段内容确定删除吗？" @confirm="deleteHandler(scope.row)">
                <el-button type="danger" slot="reference" icon="el-icon-delete" circle></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </main>
</template>

<script>
import { getUserAll, deleteUserInfo } from "api/login.api";
import { getRoleNameByValue } from "../../constants/role";
import Store from "store";

export default {
  name: "AdminControl",
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    this.getUserAll();
  },
  methods: {
    deleteHandler(row) {
      if (row.username === Store.state.userInfo.username) {
        this.$message.error('不能删除自己');
        return;
      }
      const { data } = deleteUserInfo(row.username);
      this.tableData = data;
    },
    getRoleNameByValue(val) {
      return getRoleNameByValue(val);
    },
    // 获取所有待投标列表
    getUserAll() {
      const response = getUserAll();

      console.log("response", response);

      const { data, code, msg } = response;
      if (code !== 0) {
        this.$message.warning(msg);
        return;
      }
      this.tableData = data;
    },
    handleClick(row) {
      console.log(row);
      const route = "reviewDetail";
      this.$router.push({
        path: route,
        query: { id: row.id },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.require-container {
  margin: 0 auto;
  max-width: 80vw;
  padding: 20px;
  .require-title {
    padding: 20px;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    background-color: #fff;
    .require-btn-group {
      ::v-deep {
        .el-button {
          margin-right: 20px;
        }
      }
    }
  }
  .require-body {
    display: flex;
    justify-content: center;
    padding: 20px;
    background-color: #fff;
  }
  ::v-deep {
    .el-table {
      height: 70vh !important;
    }
  }
}
</style>
